<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
        <li v-for="(item, index) in persons" :key="index">
            {{index}}---{{item.name}} --- {{item.age}}
            ---
            <button @click="deleteP(index)">删除</button>
            ---
            <button @click="updateP(index,{name : '张三',age : 13})">更新</button>
        </li>
    </ul>
    <button @click="addP">添加</button>
    <h2>测试: v-for 遍历对象</h2>


</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [
        { name: '张', age: 12 },
        { name: '里', age: 15 },
        { name: '王', age: 14 },
        { name: '孙', age: 19 },
      ]
    },
    methods: {
      deleteP(index) {
        /* 删除1个指定索引元素 */
        this.persons.splice(index, 1)
      },
      updateP(index, newP) {
        /* 删除指定索引元素后填充新元素 */
        this.persons.splice(index, 1, newP)
      },
      addP() {
        /* 在首行添加 添加元素 */
        // this.persons.splice(0,0, {name: '李四', age: 40})
        /* 在末尾添加 */
        this.persons.push({ name: '李四', age: 40 })
      }

    },


  })
</script>
</body>
</html>
